import React from 'react'
import { Tab, Tabs, TabList, TabPanel, TabPanels, Box, Image, Button, useColorMode, useColorModeValue } from '@chakra-ui/react'
import SignIn from './SignIn'
import SignUp from './SignUp'
import Card from './Card'

import UiLight from '../images/logo192.png'
import UiDark from '../images/logo512.png'

function App() {
  const { toggleColorMode } = useColorMode()
  const bgColor = useColorModeValue('gray.200', 'gray.700')
  const chakraUi = useColorModeValue(UiLight, UiDark)
  return (
    <Box bgColor={bgColor} p={3} boxShadow="lg" borderRadius="lg">
      <Image src={chakraUi} mx="auto" mt="2" />
      <Tabs isFitted>
        <TabList>
          <Tab _focus={{boxShadow: 'none'}}>注册</Tab>
          <Tab _focus={{boxShadow: 'none'}}>登录</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <SignUp />
          </TabPanel>
          <TabPanel>
            <SignIn />
          </TabPanel>
        </TabPanels>
      </Tabs>
      <Card />
      <Button onClick={toggleColorMode}>切换主题</Button>
    </Box>
  );
}

export default App;
